<template>
  <div :class="active? 'sys-symbol-active':''" class="sys-symbol" align="center">
    <el-image v-if="url" :src="url" />
    <canvas v-else ref="canvas" :width="size" :height="size" />
    <el-divider />
    <span class="name">{{ name }}</span>
  </div>
</template>

<script>
import Svg2Png from "@/utils/svg2png";

export default {
  name: "Index",
  props: {
    name: {
      type: String,
      default: "名称"
    },
    url: {
      type: String,
      default: undefined
    },
    type: {
      type: Number,
      default: 2
    },
    size: { type: Number, default: 50 },

    strokeStyle: {
      type: String,
      default: "rgba(0,0,0,1)"
    },
    lineWidth: {
      type: Number,
      default: 150
    },
    fillStyle: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    flag: {
      type: String,
      default: "面"
    },
    active: {
      type: Boolean,
      default: function() {
        return false;
      }
    }
  },
  data: function() {
    return {
      icons: undefined,
      ctx: undefined
    };
  },
  watch: {
    strokeStyle: function(n, o) {
      this.ctx.clearRect(0, 0, this.size, this.size);
      this.ctx.strokeStyle = this.strokeStyle; // 线条颜色 rgba
      this.ctx.stroke();
      this.ctx.fill();
    },
    lineWidth: function(n, o) {
      this.ctx.clearRect(0, 0, this.size, this.size);
      this.ctx.lineWidth = parseFloat(this.lineWidth / 10); // 线宽
      this.ctx.stroke();
      this.ctx.fill();
    },
    fillStyle: function(n, o) {
      this.ctx.clearRect(0, 0, this.size, this.size);
      this.ctx.fillStyle = this.fillStyle; // 背景色   rgba
      this.ctx.stroke();
      this.ctx.fill();
    },
    flag: function(n, o) {
      this.initCtx();
    }
  },
  mounted() {
    const svg = new Svg2Png();
    this.icons = svg.icons;
    this.initCtx();
  },
  methods: {
    initCtx() {
      if (this.url) {
        return;
      }
      this.ctx = this.$refs.canvas.getContext("2d");
      this.clearCanvas();
      this.icons[this.flag].draw(this.ctx);
      this.ctx.strokeStyle = this.strokeStyle; // 线条颜色 rgba
      this.ctx.lineWidth = parseFloat(this.lineWidth / 10); // 线宽
      this.ctx.fillStyle = this.fillStyle; // 背景色   rgba
      this.ctx.stroke();
      this.ctx.fill();
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.size, this.size);
    }
  }
};
</script>

<style scoped>
.sys-symbol {
  position: relative;
  /*width: 80px;*/
  /*height: 80px;*/
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.sys-symbol:hover {
  cursor: pointer;
  background-color: #e5e5e500;
  border: 1px solid #398f86;
}

.sys-symbol-active {

    background-color: #e5e5e500;
    border: 1px solid #398f86;
  }

.sys-symbol .el-divider--horizontal {
  margin: 0;
}

.sys-symbol .name {
  position: relative;
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-size: 5px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-overflow: ellipsis;
  text-after-overflow: hidden;
  color: #fff;
}
</style>
